<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TLT-文本辅助打标签软件</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
	
    <style>
        html, body{
            margin: 0;
            padding: 0;
        }

		.header{
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 1px solid #D7DAE2;
			margin: 24px 0;
		}

        header{
            font-size: 24px;
            font-weight: 1000;
			padding: 16px;
			color: #409EFF;
        }
		
		.header-right{
			flex-grow: 1;
			text-align: right;
			font-size: 14px;
			color: #999999;
			padding: 0 16px;
		}
		
		.header-right-progress{
			width: 200px;
			display: inline-block;
		}

        .content{
            width: 1140px;
            margin: auto;
        }
	
		
		
		.el-progress__text{
			font-size: 14px;
			color: #999999;
		}
    </style>
</head>
<body>
    <div id="app">
        <div class="content">
			<div class="header">
				<header class="">
					<span class="el-icon-moon-night"></span>
					<span>TLT</span>
				</header>
				<div class="header-right">
					<div class="header-right-progress"><el-progress :percentage="Math.floor(finished * 100 / total)"></el-progress></div> <span> ({{finished}}/{{total}}) 已完成</span>
				</div>
			</div>
			<div class="table">
				<template>
				  <el-table
				    :data="tableData"
				    border
				    style="width: 100%">
				    <el-table-column
				      prop="id"
				      label="用户"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="finished"
				      label="已完成"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="updated"
				      label="已更新"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="total"
				      label="工作量">
				    </el-table-column>
					<el-table-column
					  label="进度"
					  width="200">
					  <template slot-scope="scope"> <!--scope.row-->
						<el-progress :percentage="Math.floor(scope.row.finished * 100 / scope.row.total) "></el-progress>
					  </template>
					</el-table-column>
				  </el-table>
				</template>
			</div>
        </div>
    </div>
	<!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
			data(){
				return {
					tableData: [],
					finished: 0,
					total: 1
				};
			},
			created(){
				id = (this.getUrlKey("identifier", window.location.href))
				if(id === null){
					this.$message({
					  message: '缺少必要的参数',
					  type: 'warning'
					});
				}else{
					axios.get('/progress/' + id)
					  .then((response) => {
					  	if(response.data.status){
					  		var finished = 0;
					  		var total = 0
					  		for(var item of response.data.data){
					  			finished += item.finished;
					  			total += item.total;
					  		}
					  		this.finished = finished;
					  		this.total = total;
							this.tableData = response.data.data;
					  	}else{
					  		this.$message.error(response.data.msg);
					  	}
					  })
					  .catch((error) => {
						console.log(error);
					  });
				}
			},
			methods: {
				getUrlKey(name,url){
				　　return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
				}
			}
        });


    </script>
</body>
</html>